<template>
	<view class="MenuListBox">
			<view style="display: flex; margin-top: 3%;">
				<view v-for="(item, index) in goToMenuData" :key='index' style="  margin-left:5%"  v-if="index <5" @click="goMenu(index)">
					<view class="MenuList" >
						<image :src='item.iconUrl' ></image>
					</view>
					<view class="menuText">
						<text>{{item.name}}</text>
					</view>
				</view>
			</view>

	</view>
	</view>
	</view>
</template>

<script>
	import toSongDetail from '../../../comments/toSongDetail.js'
	import createAllSongList from '../../../comments/createAllSongList.js'
	import {
		mapGetters,
		mapMutations
	} from 'vuex';
	export default {
		mixins: [toSongDetail, createAllSongList],
		props: {
			goToMenuData: Array
		},
		data(){
			return{
				FMdata:[],
				songIdList:[]
			}
		},
		methods: {
			...mapMutations(['set_audio', 'set_audiolist']),
			getSongId(){
				if (JSON.stringify(this.songIdList) !== JSON.stringify(this.audiolist) || this.audiolist.length === 0) {
					this.createAllSongList(this.FMdata,this.songIdList)
					this.$store.commit('set_audiolist',{data:this.songIdList,status:false})
				}
				console.log(this.songIdList)
				this.toSongDetail(this.songIdList[0].id)
			},
			async goMenu(i){
				console.log(i)
					if(i === 0){
						uni.navigateTo({
							url:'/pages/find/pages/daily/daily',
							fail(res) {
								console.log(res)
							}
						})
					}
					// 获取FM数据
					else if(i ===1){
						const {data:res} = await this.$request({
							url:'/personal_fm'
						})
						this.FMdata = res.data
						console.log(	this.FMdata)
						this.getSongId()
						
					}
					else if (i === 3){
						uni.navigateTo({
							url:'/pages/find/pages/topList/topList',
							fail(res) {
								// console.log(res)
							}
						})
					}
			}
		}
	}
</script>

<style scoped>

	.MenuListBox {
		border-bottom: #4b4b4b 1upx solid;
	}

	.MenuList {
		text-align: center;
		background-color: #ff557f;
		border-radius: 50%;
	}

	.MenuList image {
		height: 100upx;
		width: 100upx;
		border-radius: 50%;
	}

	.menuText {
		text-align: center;
		font-size: 20upx;
		margin-top: 2%;
	}
</style>
